<template>
  <el-dialog :title="title" :visible.sync="visible" :width="width" :close-on-click-modal='false' class="bonus">
    <el-row>
      <el-form class="col-12" :model="formData" ref="formRef" :label-width="labelWidth"  :rules="rules" v-loading="formLoading" :close-on-click-modal="false">
        <el-form-item label="姓名" prop="personName" >
          <el-input v-model="formData.personName" autocomplete="off" placeholder="请输入姓名" :disabled="moudelType == 'xs'" clearable></el-input>
        </el-form-item>
        <el-form-item label="员工编号">
          <el-input v-model="formData.personCode" autocomplete="off" placeholder="请输入员工编号" :disabled="moudelType == 'xs'" clearable></el-input>
        </el-form-item>
        <el-form-item label="岗位" >
          <el-input v-model="formData.post" autocomplete="off" placeholder="请输入岗位" :disabled="moudelType == 'xs'" clearable></el-input>
        </el-form-item>
        <el-form-item label="岗位编码"  >
          <el-input v-model="formData.postCode" autocomplete="off" placeholder="请输入岗位编码" :disabled="moudelType == 'xs'" clearable></el-input>
        </el-form-item>
        <el-form-item label="部门名称" prop="deptName" >
          <el-input v-model="formData.deptName" autocomplete="off" placeholder="请输入部门名称" :disabled="moudelType == 'xs'" clearable></el-input>
        </el-form-item>
        <el-form-item label="部门编码" prop="deptCode" >
          <el-input v-model="formData.deptCode" autocomplete="off" placeholder="请输入部门编码" :disabled="moudelType == 'xs'" clearable></el-input>
        </el-form-item>
        <el-form-item label="直管领导" prop="leaderFlag" >
          <el-radio-group v-model="formData.leaderFlag" :disabled="moudelType == 'xs'">
            <el-radio :label="item.value" v-for="item in radioOptions">{{item.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="回传ECC" prop="eccFlag" >
          <el-radio-group v-model="formData.eccFlag" :disabled="moudelType == 'xs'">
            <el-radio :label="item.value" v-for="item in radioOptions">{{item.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="岗位系数" prop="postRatio" class="form-item-col-3" v-if="moudelType == 'xs'">
          <template slot="label">
            <span class="red">*</span>岗位系数
          </template>
          <div class="col-3">
            <span class="label">一级</span>
            <el-input-number :controls="false" v-model="formData.postRatioOne" autocomplete="off" placeholder="请输入" clearable></el-input-number>
          </div>
          <div class="col-3">
            <span class="label">二级</span>
            <el-input-number :controls="false"  v-model="formData.postRatioTwo" autocomplete="off" placeholder="请输入" clearable></el-input-number>
          </div>
          <div class="col-3">
            <span class="label">三级</span>
            <el-input-number :controls="false" v-model="formData.postRatioThree" autocomplete="off" placeholder="请输入" clearable></el-input-number>
          </div>
        </el-form-item>
      </el-form>
    </el-row>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleCancel(false)">取消</el-button>
      <el-button type="primary"  @click="handleSubmit">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {addObj,putObj}  from '@/api/bonus/calculateuserconfig' ;
export default {
  name: "orgForm",
  components:{
  },
  props:{
    moudelType:String,
    default:''
  },
  watch: {

  },
  data(){

    let validatePostRatio = (rule, value, callback) => {
      if (!this.formData.postRatioOne && !this.formData.postRatioTwo && !this.formData.postRatioThree) {
        callback(new Error('请输入岗位系数'));
      } else {
        callback();
      }
    };

    return{
      type:'add',
      formLoading:false,
      title:'新增',
      width:'50%',
      visible: false,
      labelWidth:'125px',
      formData: {},
      rules: {
        personName: [{ required: true, message: '请输入姓名', trigger: 'blur' },],
        personCode: [{ required: true, message: '请输入人员编码', trigger: 'blur' },],
        post: [{ required: true, message: '请输入岗位', trigger: 'blur' },],
        postCode: [{ required: true, message: '请输入岗位编码', trigger: 'blur' },],
        deptName: [{ required: true, message: '请输入机构名称', trigger: 'blur' },],
        deptFullName: [{ required: true, message: '请输入机构全称', trigger: 'blur' }],
        deptCode: [{ required: true, message: '请输入机构编码', trigger: 'blur' }],
        postRatio: [{ validator: validatePostRatio, message: '请输入岗位系数', trigger: 'blur' }],

      },
      radioOptions:[
        {label:'否',value:0} ,
        {label:'是',value:1} ,
      ]
    }
  },
  methods:{
    async init(type,parentData,currentDept){
      this.type = type
      this.currentDept = currentDept ; //父组件传过来的选择机构的信息
      this.parentData = parentData ;
      if (type == 'edit'){
         this.formData = parentData
         this.formData.deptName = currentDept.deptName
         this.title = '编辑'
      }else if(type == 'add'){
         this.title = '新增'
      }
      this.visible = true ;
    },
    handleSubmit(){
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          this.formLoading = true ;
          if (this.type == 'add'){
            addObj(Object.assign(this.formData,{deptBaseId:this.currentDept.id})).then(res=>{
              this.formLoading = false ;
              this.handleCancel(true) ;
            }).catch(()=>{
              this.formLoading = false ;
            })
          }else{
            putObj(this.formData).then(res=>{
              this.formLoading = false ;
              this.handleCancel(true) ;
            }).catch(()=>{
              this.formLoading = false ;
            })
          }

        } else {
          return false;
        }
      });
    },
    handleCancel(refresh){
      this.visible = false ;
      this.formData = {} ;
      if (refresh){
        this.$emit('refresh')
      }
      this.$refs.formRef.resetFields() ;
    },

    onChange(){

    }
  }
}
</script>

<style scoped>

</style>
